<template>
  <el-row :gutter="2" class="main-body">
    <el-col :span="8">
      <el-card class="box-card">
        <el-button-group>
          <el-button type="primary" icon="el-icon-plus">添加分类</el-button>
        </el-button-group>
      </el-card>
      <el-card class="box-card">
        <el-input
          v-model="filterText"
          placeholder="输入关键字进行过滤"
        />
        <div class="treeBody">
          <el-scrollbar wrap-class="scrollbar-wrapper">
            <el-tree
              ref="tree"
              class="filter-tree"
              :props="defaultProps"
              node-key="id"
              lazy
              :load="loadNode"
              :filter-node-method="filterNode"
              @node-click="updateClickHandler"
            />
          </el-scrollbar>
        </div>
      </el-card>
    </el-col>
    <el-col :span="16">
      <el-card class="box-card">
        <el-button-group>
          <el-button type="primary" icon="el-icon-plus">添加分类</el-button>
        </el-button-group>
      </el-card>
      <el-card class="box-card">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="100px"
        >
          <el-row>
            <el-col :xs="24" :md="24">
              <el-form-item label="父区划编号" prop="parentId">
                <el-input
                  :disabled="true"
                  v-model="form.parentId"
                  placeholder="请输入父编号"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="24">
              <el-form-item label="父区划名称" prop="name">
                <el-input
                  :disabled="true"
                  v-model="form.mergerName"
                  placeholder="请输入名称"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="24">
              <el-form-item label="区划名称" prop="name">
                <el-input
                  v-model="form.name"
                  placeholder="请输入名称"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="24">
              <el-form-item label="区划级别" prop="levelType">
                <el-select v-model="form.levelType" size="medium" placeholder="区划级别">
                  <el-option v-for="(mt,key) in regionType" :label="mt.name" :value="mt.id" :key="key"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="24">
              <el-form-item label="区划代码" prop="ctyCode">
                <el-input
                  v-model="form.ctyCode"
                  placeholder="请输入城市代码"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="24">
              <el-form-item label="简称" prop="shortName">
                <el-input
                  v-model="form.shortName"
                  placeholder="请输入简称"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="24">
              <el-form-item label="邮编" prop="zipCode">
                <el-input
                  v-model="form.zipCode"
                  placeholder="请输入邮编"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="24">
              <el-form-item label="经度" prop="lng">
                <el-input v-model="form.lng"
                          placeholder="请输入经度"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="24">
              <el-form-item label="维度" prop="lat">
                <el-input v-model="form.lat"
                          placeholder="请输入维度"></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :md="24">
              <el-form-item label="拼音" prop="pinyin">
                <el-input v-model="form.pinyin"
                          placeholder="请输入拼音"></el-input>
              </el-form-item>
            </el-col>
            <div class="dialog-footer">
              <el-button>清空</el-button>
              <el-button type="primary">保存</el-button>
            </div>
          </el-row>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>
<script>
import {treeList, list, findById, save, deleteById, updateById} from '@/api/area'
import waves from '@/directive/waves'

export default {
  name: 'Area',
  directives: {waves},
  data() {
    return {
      list: null,
      total: 0,
      listLoading: true,
      filterText: '',
      defaultProps: {
        children: 'children',
        label: 'name',
        isLeaf: 'leaf'
      },
      regionType: [
        {
          id: 0,
          name: '国家'
        },
        {
          id: 1,
          name: '省'
        },
        {
          id: 2,
          name: '市'
        },
        {
          id: 3,
          name: '区县'
        }
      ],
      data: [],
      rules: {
        name: [{required: true, trigger: 'blur', message: '名称不能为空'}],
        shortName: [{required: true, trigger: 'blur', message: '简称不能为空'}],
        levelType: [{required: true, trigger: 'blur', message: '级别不能为空'}],
        ctyCode: [{required: true, trigger: 'blur', message: '城市代码不能为空'}],
        zipCode: [{required: true, trigger: 'blur', message: '邮编不能为空'}],
        mergerName: [{required: true, trigger: 'blur', message: '详细名称不能为空'}],
        lng: [{required: true, trigger: 'blur', message: '经度不能为空'}],
        lat: [{required: true, trigger: 'blur', message: '维度不能为空'}],
        pinyin: [{required: true, trigger: 'blur', message: '拼音不能为空'}]
      },
      form: {}
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    this.getTree()
  },
  methods: {
    filterNode(value, data) {
      console.log(data)
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    getTree() {
      const that = this
      treeList().then(response => {
          that.data = response.data
        }
      )
    },
    loadNode(node, resolve) {
      list({
        parentId: node.level === 0 ? 100000 : node.key
      }).then(response => {
        resolve(response.data)
      })
    },
    updateClickHandler(data) {
      this.resetForm()
      findById(data.id).then(response => {
        this.form = response.data
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    }
    ,
    deleteHandle(id) {
      const me = this
      this.$confirm('是否删除这条数据？?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteById(id).then(() => {
          me.getList()
        })
      })
    }
    ,
    saveHandle() {
      const me = this
      me.$refs.form.validate(valid => {
        if (valid) {
          this.downloadLoading = true
          if (me.dialogStatus === 'create') {
            save(this.form).then(() => {
              this.listLoading = false
              me.getList()
            })
          } else {
            updateById(this.form).then(() => {
              this.listLoading = false
              me.getList()
            })
          }
        } else {
          return false
        }
      })
    },
    resetForm() {
      if (this.$refs.form !== undefined) {
        this.$refs.form.resetFields()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  height: 100%;
  margin: 10px 8px;
  padding: 0;
}

.treeBody {
  margin-top: 10px;
  height: 580PX;
  overflow: hidden;
}

.filter-tree {
  margin-top: 5px;
}

.dialog-footer {
  text-align: center;
}

.scrollbar-wrapper {
  overflow-x: hidden !important;
}

.el-scrollbar__bar.is-vertical {
  right: 0px;
}

.el-scrollbar {
  height: 100%;
}

.header {
  margin-bottom: 10px;
}

.main-body {
  padding-bottom: 10px;
}
</style>

